import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/ht_appbar.dart';
import 'package:wallet_utils/log_util.dart';
import 'package:wallet_utils/report_widget/click_widget.dart';
import 'package:wallet_utils/safe_bottom_view.dart';
import 'package:wallet_utils/text_style.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/toast.dart';
import '../baseView/show_photo.dart';
import 'logic.dart';

class ContactServicePage extends StatelessWidget {
  final logic = Get.put(ContactServiceLogic());
  final state = Get
      .find<ContactServiceLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorManager.colorFFFFFF,
      appBar: htCommonAppbar(context, title: '投诉建议'),
      bottomNavigationBar: setBottomButton(
        context,
        '提交',
        color: ColorManager.colorFFFFFF,
        hasShadow: false,
        onPressed: () async {
          try {
            logic.submit();
          } catch (e) {
            // If an error occurs, log the error to the console.
            print(e);
          }
        },
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                margin: EdgeInsets.only(left: 16.w, top: 15.w, bottom: 15.w),
                child: Text(
                  '请选择投诉反馈类型',
                  style: TextStyleUtils.style000000(fontSize: 15.sp),
                )),
            SizedBox(
              height: 50.w,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: state.list.length,
                scrollDirection: Axis.horizontal,
                physics: const NeverScrollableScrollPhysics(),
                itemBuilder: ((context, index) {
                  return feedbackWidget(index);
                }),
              ),
            ),
            //反馈类型
            Container(
              margin: EdgeInsets.only(
                  left: 20.w,
                  right: 20.w,
                  top: 20.w,
                  bottom: 10.w),
              child: Text(
                '投诉内容',
                style: TextStyleUtils.style000000(fontSize: 15.sp),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              padding: EdgeInsets.all(15.w),
              decoration: BoxDecoration(
                color: ColorManager.colorF9F9F9,
                borderRadius:
                BorderRadius.all(Radius.circular(4.w)),
              ),
              child: TextField(
                controller: logic.state.controller,
                maxLength: 200,
                minLines: 10,
                maxLines: 10,
                keyboardType: TextInputType.text,
                textInputAction: TextInputAction.done,
                autocorrect: true,
                //是否自动更正
                // cursorColor: ColorManager.color_2A2A2A,
                style: TextStyleUtils.style2A2A2A(
                  fontSize: 14.sp,
                ),
                decoration: InputDecoration(
                  counterStyle: TextStyleUtils.styleC1C1C1(
                      fontSize: 12.sp),
                  // counterText: '',
                  hintText: "请描述您的问题",
                  hintMaxLines: 6,
                  hintStyle: TextStyleUtils.style999999(
                    fontSize: 14.sp,
                  ),
                  contentPadding:
                  EdgeInsets.only(bottom: 10.w),
                  border: InputBorder.none,
                ),
                onChanged: (value) {},
              ),
            ),
            Container(
              height: 30.w,
              margin: EdgeInsets.only(top: 10.w,left: 16.w,right: 16.w),
              decoration:  BoxDecoration(
                color:ColorManager.colorF9F9F9,
                //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
              ),
              child: buildRow('本人联系方式',state.phoneController,'请输入您的联系方式'),
            ),
            Container(
              margin: EdgeInsets.only(left: 16.w, right: 16.w, top: 30.w, bottom: 10.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('上传图片(选填)', style: TextStyleUtils.style000000(fontSize: 15.sp),),
                  Text('最多5张', style: TextStyleUtils.style999999(fontSize: 15.sp),)
                ],
              ),
            ),
            GetBuilder<ContactServiceLogic>(builder: (logic) {
              return Container(
                margin: EdgeInsets.only(left: 16.w, right: 16.w),
                child: GridView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisSpacing: 20.w, //水平子 Widget 之间间距
                    mainAxisSpacing: 10.w, //垂直子 Widget 之间间距
                    crossAxisCount: 3,
                  ),
                  itemBuilder: sealImages,
                  itemCount: logic.state.agreementList.length,
                ),
              );
            }),

          ],
        ),
      ),
    );
  }

  Widget feedbackWidget(int index) {
    return GetBuilder<ContactServiceLogic>(builder: (logic) {
      return ClickWidget(
        onTap: () {
          logic.feedbackCheck(index);
        },
        child: Container(
          width: 103.w,
          height: 42.w,
          alignment: Alignment.center,
          margin: EdgeInsets.only(left: 15.w),
          decoration: BoxDecoration(
            color: state.list[index].typeColor,
            //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
            borderRadius: const BorderRadius.all(Radius.circular(4.0)),
            border: Border.all(width: 1, color: state.list[index].bordColor ?? ColorManager.colorF8F9FA),
          ),
          child: Text(
            state.list[index].name ?? '',
            style: TextStyleUtils.style333333(fontSize: 14.sp),
          ),
        ),
      );
    });
  }

  Widget sealImages(context, index) {
    if (index ==0) {
      return InkWell(
        child: Image.asset(
          'images/user_feedback_add.png',
          width: 90.w,
          height: 90.w,
        ),
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
          if(state.agreementList.length==6){
            ToastUtils.showToast('最多上传五张图片');
          }else{
            ShowImagePhoto.showImgDialog(
                context, () async {
              Get.back();
              logic.takePhoto(index);
            }, () async {
              Get.back();
              logic.openGallery(context,);
            });
          }
        },
      );
    } else {
      return InkWell(
        child: Stack(
          alignment: Alignment.center,
          children: [
            Container(
              width: 90.w,
              height: 90.w,
              decoration: BoxDecoration(
                  color: ColorManager.colorFBFDFF,
                  border:
                  Border.all(color: ColorManager.colorF4F4F4, width: 0.5.w),
                  borderRadius: BorderRadius.all(Radius.circular(5.w))),
              child: Image.network(logic.state.agreementList[index].getImage ?? '',fit: BoxFit.cover,),
            ),
            Positioned(
              right: 0.w,
              top: 0,
              child: Image.asset(
                'images/user_feedback_delete.png',
                width: 20.w,
                height: 20.w,
              ),
            )
          ],
        ),
        onTap: () {
          logic.state.agreementList.removeAt(index);
          logic.update();
        },
      );
    }
  }
  Widget buildRow(String name, TextEditingController controller, String title) {
    return Container(
      margin: EdgeInsets.only(left: 15.w, right: 15.w),
      alignment: Alignment.center,
      child: TextField(
        controller: controller,
        minLines: 1,
        autocorrect: true,
        cursorColor: ColorManager.color353535,
        textAlign: TextAlign.left,
        keyboardType: TextInputType.phone,
        inputFormatters: [LengthLimitingTextInputFormatter(11), FilteringTextInputFormatter.digitsOnly],
        textAlignVertical: TextAlignVertical.center,
        style: TextStyleUtils.style000000(fontSize: 15.sp),
        decoration: InputDecoration(
          isDense: true,
          contentPadding: EdgeInsets.only(bottom: 0.w),
          border: InputBorder.none,
          hintText: title,
          hintStyle: TextStyleUtils.style999999(fontSize: 15.sp),
        ),
        onChanged: (text) => LogUtils.d('change $text'),
        onSubmitted: (text) => LogUtils.d('submit $text'),
        enabled: true,
      ),
    );
  }
}
